<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>线路管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">



    <blockquote class="layui-elem-quote"  >

                <div class=" layui-form" >
                    <div class="layui-form-item">


                         <div class="layui-input-inline" style="width: 130px" >
                        <select name="khSearch"  id="khSearch" lay-filter="khSearch">
                            <option value="">客户搜索类型</option>
                            <option value="客户简称">客户简称</option>
                            <option value="客户助记码">客户助记码</option>
                        </select>
                        <select name="khSearch" lay-verify="required" id="qySearch" lay-filter="qySearch">
                            <option value="">区域搜索类型</option>
                            <option value="区域名称">区域名称</option>
                            <option value="区域助记码">区域助记码</option>
                        </select>
                        </div>


                        <div class="layui-input-inline"  >
                            <select type="text"  class="layui-input" placeholder="请输入" id="serContKh" lay-search><option value="">请选择</option></select>

                            <select type="text"  class="layui-input" placeholder="请输入" id="serContQy" lay-search><option value="">请选择</option></select>
                        </div>


                        <div class="layui-input-inline" style="width: 125px">
                            <select name="xlSearch" lay-verify="required" id="xlSearch" lay-filter = "xlSearch" >
                                <option value="">线路搜索类型</option>
                                <option value="线路名称">线路名称</option>
                                <option value="线路助记码">线路助记码</option>
                            </select>

                            <label class="layui-form-label" style="width: 120px"  >班次类型:</label>

                        </div>
                        <div class="layui-input-inline"  >
                            <select type="text"  class="layui-input" placeholder="请输入" id="serContXl" lay-search > <option value="">请选择</option></select>
                            <div class="layui-input-inline"  >
                                <select   lay-verify="required" id="leixing">
                                    <option value="">请选搜索类型</option>
                                    <option value="正班">正班</option>
                                    <option value="加班">加班</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-input-inline" style="width: 120px">
                            <label class="layui-form-label">星期</label>
                        </div>
                        <div class="layui-input-inline"  >
                            <div class="layui-input-inline" style="width: 100px">
                                <select class="layui-form-label" id="xingqi">
                                    <option value=""></option>
                                    <option value="星期一">星期一</option>
                                    <option value="星期二">星期二</option>
                                    <option value="星期三">星期三</option>
                                    <option value="星期四">星期四</option>
                                    <option value="星期五">星期五</option>
                                    <option value="星期六">星期六</option>
                                    <option value="星期日">星期日</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width: 80px">
                            <button class="layui-btn layui-btn-normal" id="search">点击搜索</button>

                            <button class="layui-btn layui-btn-normal" id="all">显示全部</button>
                        </div>
                        <div class="layui-input-inline" style="position: absolute;right: 5%;width: 15%">
                            <button id="newInfo" class="layui-btn layui-btn-normal">新增线路信息</button>
                        </div>





                    </div>
                </div>

    </blockquote>
        <div class="layui-row">
            <div class="layui-col-xs12">

                <script type="text/html" id="opera">
                    {{#  if( getQueryVariable("D") == "false" && getQueryVariable("R") == "true"){ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</button>
                    <!--<button class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled="disabled" lay-event="oilprice">设置油单价</button>-->
                    <button class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled="disabled" lay-event="delete">删除</button>
                    {{# }else if(getQueryVariable("R") == "false"){ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" disabled="disabled" lay-event="detail">查看</button>
                    <!--<button class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" disabled="disabled" lay-event="oilprice">设置油单价</button>-->
                    <button class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled="disabled" lay-event="delete">删除</button>
                    {{# }else  { }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs  "   lay-event="detail">查看</button>
                    <!--<button class="layui-btn layui-btn-normal layui-btn-xs  "   lay-event="oilprice">设置油单价</button>-->
                    <button class="layui-btn layui-btn-danger layui-btn-xs  "   lay-event="delete">删除</button>
                    {{# } }}
                </script>
                <table id="table" lay-filter="Table"></table>
                <script type="text/html" id="roadPeriod">
                    {{#  if(d.yxzqzhouyi  ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >一</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >一</a>
                    {{#  } }}
                    {{#  if(d.yxzqzhouer  ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >二</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >二</a>
                    {{#  } }}
                    {{#  if(d.yxzqzhousan){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >三</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >三</a>
                    {{#  } }}
                    {{#  if(d.yxzqzhousi  ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >四</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >四</a>
                    {{#  } }}
                    {{#  if(d.yxzqzhouwu  ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >五</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >五</a>
                    {{#  } }}
                    {{#  if(d.yxzqzhouliu ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >六</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >六</a>
                    {{#  } }}
                    {{#  if(d.yxzqzhouri  ){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="road1" >日</a>
                    {{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1"  >日</a>
                    {{#  } }}
                </script>
            </div>

        </div>




<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
    <script src="../js/tools.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form' ,'table','element'], function(){
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        var tableheight=  'full-200';
        var tablewidth = 75;
        var currentPage = 1;
        var tablehead=[[ //表头
            { type:'numbers', title: '序号',  align:'center'  }
            ,{field: 'xlmc', title: '线路名称', align:'center',width:140}
            ,{field: 'xlzjm', title: '助记码', align:'center'}
            ,{field: 'khjc', title: '客户简称', align:'center'}
            ,{field: 'qymc', title: '区域名称', align:'center'}
            ,{title: '运行周期（周一~周日）', align:'center',templet:'#roadPeriod' ,width:270}
            ,{field: 'xllx', title: '线路类型', align:'center'}
            ,{field: 'fcsj', title: '发车时间', align:'center'}
            ,{field: 'ddsj', title: '到达时间', align:'center'}
            ,{field: 'yunfei', title: '运费', align:'center'}
            ,{field: 'huowu', title: '货物', align:'center'}
            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera',width: '15%'}
            ,
        ]];


        $("#all").click(function(){
                 url =contextPath + "/road";
                $.ajax({
                    url: url,
                    type: "GET",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(res){
                        table.render({
                            elem: '#table'
                            ,height:tableheight
                            ,data:res.list
                            ,page: {
                                    curr: 1 //重新从第 1 页开始
                                ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                            ,limit:10
                            ,cellMinWidth: tablewidth
                            ,cols: tablehead
                            ,done: function(res, curr, count){
                                //得到当前页码
                                console.log(curr);
                                currentPage = curr;
                            }
                        });
                    }
                });

        });
//获取url参数 渲染 权限控制的页面
        if(getQueryVariable("C") == "false"){
            $("#newInfo").attr("disabled",true) ;
            $("#newInfo").addClass("layui-btn-disabled");
        }

        //渲染select 搜索

        form.on("select(khSearch)",function (data) {
            if(data.value == "客户简称" ){
                $("#serContKh").empty();
                $.ajax({
                    url: contextPath+"/cstmrlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContKh").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].khjc+ "'>"+res.list[i].khjc+"</option>";
                            $("#serContKh").append(option);
                        };
                        form.render('select');
                    }
                });
            }else if(data.value == "客户助记码" ){
                $("#serContKh").empty();
                $.ajax({
                    url: contextPath+"/cstmrlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContKh").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].khzjm+ "'>"+res.list[i].khzjm+"</option>";
                            $("#serContKh").append(option);
                        };
                        form.render('select');
                    }
                });
            } else{
                $("#serContKh").empty();
            }

        });

        form.on("select(qySearch)",function (data) {
            if(data.value == "区域名称" ){
                $("#serContQy").empty();
                $.ajax({
                    url: contextPath+"/arealist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContQy").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].qymc+ "'>"+res.list[i].qymc+"</option>";
                            $("#serContQy").append(option);
                        };
                        form.render('select');
                    }
                });
            }else if(data.value == "区域助记码" ){
                $("#serContQy").empty();
                $.ajax({
                    url: contextPath+"/arealist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContQy").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].zjm+ "'>"+res.list[i].zjm+"</option>";
                            $("#serContQy").append(option);
                        };
                        form.render('select');
                    }
                });
            }else{
                $("#serContQy").empty();
            }

        });

        form.on("select(xlSearch)",function (data) {
            if(data.value == "线路名称" ){
                $("#serContXl").empty();
                $.ajax({
                    url: contextPath+"/roadlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContXl").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].xlmc+ "'>"+res.list[i].xlmc+"</option>";
                            $("#serContXl").append(option);
                        };
                        form.render('select');
                    }
                });
            }else if(data.value == "线路助记码" ){
                $("#serContXl").empty();
                $.ajax({
                    url: contextPath+"/roadlist",
                    type: "GET",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        $("#serContXl").append("<option value=''>请选择</option>");
                        for(var i in res.list){
                            var option = "<option value='"+ res.list[i].xlzjm+ "'>"+res.list[i].xlzjm+"</option>";
                            $("#serContXl").append(option);
                        };
                        form.render('select');
                    }
                });
            }else{
                $("#serContXl").empty();
            }

        });

        //搜索

        var url =contextPath + "/road?"+"xlmczj"+"="+$("#serContXl").val()+"&"+"qymczj"+"="+$("#serContQy").val()+"&"+"khjczj"+"="+$("#serContKh").val()+"&"+"leixing="+$("#leixing").val()+"&xq="+$("#xingqi").val();
        $("#search").click(function () {
             url = contextPath + "/road?"+"xlmczj"+"="+$("#serContXl").val()+"&"+"qymczj"+"="+$("#serContQy").val()+"&"+"khjczj"+"="+$("#serContKh").val()+"&"+"leixing="+$("#leixing").val()+"&xq="+$("#xingqi").val();
            console.log(url);
            $.ajax({
                url: url,
                type: "GET",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(res){
                    table.render({
                        elem: '#table'
                        ,height:tableheight
                        ,data:res.list
                        ,page: {
                                    curr: currentPage //重新从第 1 页开始
                            ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                        ,limit:10
                        ,cellMinWidth: tablewidth
                        ,cols:tablehead
                        ,done: function(res, curr, count){
                            //得到当前页码
                            console.log(curr);
                            currentPage = curr;
                        }
                    });
                }
            });
        });
        $('#newInfo').click(function () {
            layer.open({
                type: 2,
                title: '新增线路信息',
                maxmin: true,
                cancel: function(index, layero){
                    var faIndex = index;
                    layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                        //do something
                        layer.close(index);
                        layer.close(faIndex);
                    });
                    return false
                },
                shadeClose: false, //点击遮罩关闭层
                area :['80%' , '80%'],
                content: './newRoad.html',
                end:function(){
                    $.ajax({
                        url: contextPath + "/road",
                        type: "GET",
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        success: function(res){

                            table.render({
                                elem: '#table'
                                ,height:tableheight
                                ,data:res.list
                                ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                    ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                                ,limit:10
                                ,cellMinWidth: tablewidth
                                ,cols:tablehead
                                ,done: function(res, curr, count){
                                    //得到当前页码
                                    console.log(curr);
                                    currentPage = curr;
                                }
                            });
                        }
                    });
                }
            });
        });
        //table实例
        $.ajax({
            url: url,
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function(res){
                table.render({
                    elem: '#table'
                    ,height:tableheight
                    ,data:res.list
                    ,page: {
                                    curr: currentPage //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                    ,limit:10
                    ,cellMinWidth: tablewidth
                    ,cols: tablehead
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                });
                }
            });



        //监听工具条
        table.on('tool(Table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            // console.log(data);
            if(layEvent === 'detail'){
                layer.open({
                    cancel: function(index, layero){
                        var body = layer.getChildFrame('body',index);
                        var faIndex = index;
                        // console.log(layero);
                        if(!(body.contents().find("#modiSub").hasClass("layui-btn-disabled"))){

                            layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                                //do something
                                layer.close(index);
                                layer.close(faIndex);
                            });
                        }else {
                            layer.close(faIndex);
                        }

                        return false
                    },
                    type: 2,
                    title: '查看线路信息',
                    maxmin: true,
                    shadeClose: false, //点击遮罩关闭层
                    area : ['80%' , '80%'],
                    content: './lookRoad.html',
                    success:function(layero,index){
                        // console.log(data);
                        var body = layer.getChildFrame('body',index);
                        data.isU = getQueryVariable("U");
                        for(var i in data){
                            body.contents().find("[name='"+i+"']").val(eval("data."+i));
                        }
                    },
                    end:function(){
                        $.ajax({
                            url: url,
                            type: "GET",
                            contentType: "application/json;charset=utf-8",
                            dataType: "json",
                            success: function(res){
                                table.render({
                                    elem: '#table'
                                    ,height:tableheight
                                    ,data:res.list
                                    ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                                    ,limit:10
                                    ,cellMinWidth: tablewidth
                                    ,cols: tablehead
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }
                        });
                    }
                });
            } else if(layEvent === 'delete'){
                layer.confirm('确定删除？', function(index){

                    //向服务端发送删除指令
                    $.ajax({
                        url: contextPath+"/road/"+data.xlid,
                        type: "DELETE",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {

                            if(res.message == "删除成功！"){
                                layer.close(index);
                                obj.del(); //删除对应行（tr）的DOM结构
                            }

                            layer.msg(res.message);
                            $.ajax({
                                url: url,
                                type: "GET",
                                contentType: "application/json;charset=utf-8",
                                dataType: "json",
                                success: function(res){
                                    table.render({
                                        elem: '#table'
                                        ,height:tableheight
                                        ,data:res.list
                                        ,page: {
                                            curr: currentPage //重新从第 1 页开始
                                            ,layout:['prev', 'page', 'next','skip','count']
                                        } //开启分页
                                        ,limit:10
                                        ,cellMinWidth: tablewidth
                                        ,cols:tablehead
                                        ,done: function(res, curr, count){
                                            //得到当前页码
                                            console.log(curr);
                                            currentPage = curr;
                                        }
                                    });
                                }
                            });
                        }
                    });
                });
            }else if(layEvent === 'road1'){

            }else if(layEvent === 'road2'){

            }else if(layEvent === 'road3'){

            }else if(layEvent === 'road4'){

            }else if(layEvent === 'road5'){

            }else if(layEvent === 'road6'){

            }else if(layEvent === 'road7'){

            }
        });
    });





</script>
</div>
</body>
</html>